page-user-agent {
	.top {
		height: auto;
		width: 100%;
		position: relative;
		.top-img {
			height: 100%;
			width: 100%;
			display: block;
		}
		.card-content {
			position: absolute;
			top: 22px;
			left: 16px;
			right: 16px;
			z-index: 3;
			height: auto;
			.card-top {
				padding: 0 9px;
				height: auto;
				overflow: auto;
				line-height: 30px;
				span {
					height: 30px;
					width: 150px;
					background: #F9C669 url('../assets/imgs/agent/next.png') no-repeat;
					border-radius: 50px;
					text-align: left;
					padding-left: 15px;
					color: #fff;
					font-size: 13px;
					background-position-x: 125px;
					background-position-y: 6px;
					background-size: 18px 18px;
				}
			}
			.card-list {
				width: 100%;
				background: url('../assets/imgs/agent/card.png') no-repeat;
				background-size: 100%;
				margin-top: 23px;
				// background-position-y: 13px;
				height: 213px;
				padding: 26px 28px;
				overflow: auto;
				div {
					height: 80px;
					width: 50%;
					position: relative;
					background: url('../assets/imgs/agent/list-bg-1.png') no-repeat;
					background-size: 20%;
					background-position-x: 90%;
					background-position-y: 70%;
					h6 {
						font-size: 23px;
						color: $text-color;
						margin: 0;
						margin-bottom: 12px;
						position: relative;
						padding-left: 10px;
					}
					h6:after {
						content: '';
						height: 6px;
						width: 6px;
						border-radius: 100%;
						background: #EC6A62;
						position: absolute;
						top: 50%;
						margin-top: -3px;
						left: 0;
					}
					span {
						font-size: 13px;
						color: rgb(102, 102, 102);
					}
				}
				div:nth-child(2) {
					background: url('../assets/imgs/agent/list-bg-2.png') no-repeat;
					background-size: 20%;
					background-position-x: 90%;
					background-position-y: 70%;
					padding-left: 20px;
					h6:after {
						content: '';
						height: 6px;
						width: 6px;
						border-radius: 100%;
						background: rgb(139, 206, 141);
						position: absolute;
						top: 50%;
						margin-top: -3px;
						left: 0;
					}
				}
				div:nth-child(3) {
					background: url('../assets/imgs/agent/list-bg-3.png') no-repeat;
					background-size: 20%;
					background-position-x: 90%;
					background-position-y: 70%;
					padding-top: 10px;
					h6:after {
						content: '';
						height: 6px;
						width: 6px;
						border-radius: 100%;
						background: #7DABF7;
						position: absolute;
						top: 50%;
						margin-top: -3px;
						left: 0;
					}
				}
				div:nth-child(4) {
					background: url('../assets/imgs/agent/list-bg-4.png') no-repeat;
					background-size: 20%;
					background-position-x: 90%;
					background-position-y: 70%;
					padding-left: 20px;
					padding-top: 10px;
					h6:after {
						content: '';
						height: 6px;
						width: 6px;
						border-radius: 100%;
						background: #FF8F6B;
						position: absolute;
						top: 50%;
						margin-top: -3px;
						left: 0;
					}
				}
				div:nth-child(1):after {
					content: '';
					position: absolute;
					bottom: 0;
					height: 1px;
					background: #F2F2F2;
					left: 0;
					right: 20px;
				}
				div:nth-child(2):after {
					content: '';
					position: absolute;
					bottom: 0;
					height: 1px;
					background: #F2F2F2;
					left: 20px;
					right: 0;
				}
				div:nth-child(1):before {
					content: '';
					position: absolute;
					right: 0;
					width: 1px;
					background: #F2F2F2;
					top: 0%;
					bottom: 20px;
				}
				div:nth-child(3):before {
					content: '';
					position: absolute;
					right: 0;
					width: 1px;
					background: #F2F2F2;
					top: 20px;
					bottom: 0;
				}
			}
		}
	}
	.bottom,
	.img-group {
		width: 100%;
		height: auto;
		position: relative;
		img {
			width: 100%;
			height: 100%;
			display: block;
			margin-top: -1px;
		}
		.ewm {
			position: absolute;
			bottom: 20px;
			height: 150px;
			width: 150px;
			padding: 10px;
			left: 50%;
			margin-left: -75px;
			background: #fff;
		}
	}
}
